<template>
    <div class="main">
        <div class="group">
            <h3>绑定 HTML Class 绑定对象</h3>
            <div class="content">
                <div :class="{ active: isActive, 'text-skyblue': hasError }" @click="changeClass">沁园春·雪</div>
            </div>
        </div>

        <div class="group">
            <h3> Class 绑定reactive对象变量</h3>
            <div class="content">
                <div :class="classObj" @click="changeClass2">沁园春·雪</div>
            </div>
        </div>

        <div class="group">
            <h3> Class 绑定ref对象变量</h3>
            <div class="content">
                <div :class="classObjRef" @click="changeClass3">沁园春·雪</div>
            </div>
        </div>

        <div class="group">
            <h3>绑定 HTML class: 绑定数组</h3>
            <div class="content">
                <div :class="[isActive ? activeClass2 : '', errorClass2, `active-new`]" @click="changeClass4">沁园春·雪
                </div>
            </div>
        </div>

        <div class="group">
            <h3>绑定 HTML class: 在组件中使用</h3>
            <div class="content">
                <diyDemoSon4 :class="classObj"></diyDemoSon4>
            </div>
        </div>

        <div class="group">
            <h3>绑定 HTML class: 计算属性</h3>
            <div class="content">
                <div :class="classObjComp" @click="changeClass4">沁园春·雪</div>
            </div>
        </div>


    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo24'
}

</script>

<script setup lang='ts'>
import { computed, reactive, ref } from 'vue';

import diyDemoSon4 from './components/diyDemoSon4.vue';

const isActive = ref(false)
const hasError = ref(false)

const activeClass2 = ref('active')
const errorClass2 = ref('text-skyblue')

// 计算属性
const classObjComp = computed(() => ({
    active: true,
    'text-skyblue': true
}))

const changeClass4 = () => {
    errorClass2.value = 'text-green'
}



function changeClass() {
    isActive.value = !isActive.value
    hasError.value = !hasError.value
}

const classObj = reactive({
    active: true,
    'text-skyblue': true
})
console.log('reactive:', classObj);

function changeClass2() {
    classObj.active = !classObj.active
}

const classObjRef = ref({
    active: true,
    'text-skyblue': true
})

console.log('ref', classObjRef);
console.log('ref.value', classObjRef.value);

function changeClass3() {
    classObjRef.value['text-skyblue'] = !classObjRef.value['text-skyblue']
}


</script>

<style lang="scss" scoped>
@import '@/assets/groupDemo.scss';

.active {
    color: rgb(255, 17, 0);
}

.text-skyblue {
    background-color: skyblue;
}


.text-green {
    background-color: green;
}

.active-new {
    font-size: 25px;
    font-weight: 700;
}
</style>